<template>
  <div class="location">
    <header-bar title="位置采集"></header-bar>
    <content-scroll>
      <div class="main-wrapper">
        <group gutter="0">
          <div slot="title" class="title-wrapper">
            <icon name="circles" :scale="2" style="margin-right: 8px;"></icon>
            <h4>位置信息</h4>
          </div>
  
          <x-input placeholder="所采集的公司或店铺名称">
            <img slot="label" style="padding-right:10px;display:block;" src="~@/assets/img/ico-01-1.png" width="24" height="24">
          </x-input>
  
          <x-input placeholder="纳税人姓名">
            <img slot="label" style="padding-right:10px;display:block;" src="~@/assets/img/ico-01-1.png" width="24" height="24">
          </x-input>
  
          <cell-box class="register-type-box">
            <div class="label-wrapper">
              <img style="padding-right:10px;display:inline-block;" src="~@/assets/img/ico-01-1.png" width="24" height="24">
              <span>注册类型：</span>
            </div>
            <div class="radio-group">
              <input type="radio" id="radio1" name="gender" value="male">
              <label for="radio1">办理注册地址</label>
  
              <input type="radio" id="radio2" name="gender" value="male">
              <label for="radio2">成产经营地址</label>
  
              <input type="radio" id="radio3" name="gender" value="male">
              <label for="radio3">货物存放地</label>
            </div>
  
  
          </cell-box>
  
          <x-input placeholder="详细地址">
            <img slot="label" style="padding-right:10px;display:block;" src="~@/assets/img/ico-01-1.png" width="24" height="24">
          </x-input>

          <cell-box style="position: relative;">
            <div class="label-box">
              <img style="padding-right:10px;display:block;" src="~@/assets/img/ico-01-1.png" width="24" height="24">
            </div>
            <span for="input">点击上传</span>
            <input class="input-box" type="file" name="image" accept="image/*" capture style="width: 100%; height: 100%; opacity: 0;" onchange="setImagePreview(this)"/>
          </cell-box>
        </group>

        <x-button class="submit-btn">提交</x-button>
      </div>
  
    </content-scroll>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    CellBox,
    XTextarea,
    XButton,
    XInput
  } from "vux"
  import HeaderBar from '@/components/HeaderBar'
  import ContentScroll from '@/components/ContentScroll'
  
  export default {
    components: {
      Group,
      Cell,
      CellBox,
      XTextarea,
      XButton,
      HeaderBar,
      XInput,
      ContentScroll
    },
    methods: {
      setImagePreview(data) {
        // var str = "";
        // for (var i = 0; i < data.files.length; i++) {
        //   console.log(data.files[i]);
        //   var src = window.URL.createObjectURL(data.files[i]);
        //   console.log("image path: " + src);
        //   str += "<img src='" + src + "' style='width:100px;height:100px;margin:15px 15px 0 15px; float:left;' />";
        // }
        // document.getElementById('content').innerHTML = str;
      },
      upload(){
        // this.$refs.input.click()
      }
    }
  };
</script>


<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .location{
    background-color: @color-background-main;
    .title-wrapper{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    h4{
      font-size: 16px;
    }
  }
  .input-box{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .main-wrapper{
    margin-top: 12px;
    padding-bottom: 40px;
  }
  .register-type-box{
    display: flex;
    align-items: flex-start;
    .label-wrapper, .radio-group {
      display: inline-block;
    }
    .label-wrapper{
      display: flex;
      align-items: center;
      margin-right: 12px;
    }
    .radio-group{
      input, label{
        float: left;
        height: 24px;
        line-height: 24px;
        &:checked{
          color: red;
        }
      }
      input{
        clear: left;
        margin-right: 6px;
        outline: none;
        &:checked{
          color: red;
        }
      }
    }
  }
  }
  
  
</style>

